<script setup>
import { reactive, ref } from "vue";
import USER from "@/assets/imgs/login/login-user.png";
import request from "@/utils/request";
import { useRouter } from "vue-router";
import Toast from "@/components/Toast.vue";
const data = reactive({showToast:false,ToastMessage:''})
const showToast = (message)=>{
  data.showToast = true
  data.ToastMessage=message
  setTimeout(()=>{
    data.showToast = false
  data.ToastMessage=''
  },2000)
}
let username = ref("");
let password = ref("");
let repassword = ref("");
let type = ref("登录");
const router = useRouter();
// 发送登录请求
async function jumpHome() {
  try {
    const result = await request.post("/api/v1/login", {
      username: username.value,
      password: password.value,
    });
    if (result.msg == "ok") {
      // 保存用户信息
      localStorage.userinfo = JSON.stringify({
        username,
        password,
      });
      const userId = result.data.id;  
      localStorage.setItem('userId', userId);
      localStorage.isLogin = true;
      router.replace({ name: "home" });
    } else {
      showToast(result.msg);
    }
  } catch (error) {
    showToast("请求失败");
  }
}
// 发送注册请求
async function jumpLogin() {
  try {
    const result = await request.post("/api/v1/register", {
      username: username.value,
      password: password.value,
      repassword: repassword.value,
    });
    if (result.msg == "用户已注册！") {
      type.value = "登录";
    } else {
      showToast(result.msg);
    }
  } catch (error) {
    showToast("请求失败");
  }
}
</script>

<template>
  <Toast v-if="data.showToast" :message="data.ToastMessage"></Toast>
  <main>
    <van-image round width="72" height="72" class="login-user" :src="USER" />
    <van-space direction="vertical" fill>
      <van-field class="input" v-model="username" placeholder="请输入手机号" />
      <van-field
        class="input"
        v-model="password"
        type="password"
        placeholder="请输入密码"
      />
      <van-field
        class="input"
        v-if="type == '注册'"
        v-model="repassword"
        type="password"
        placeholder="请确认密码"
      />
      <van-button
        v-if="type == '登录'"
        type="primary"
        block
        class="btn"
        @click="jumpHome"
      >
        登录</van-button
      >
      <van-button v-else type="primary" block class="btn" @click="jumpLogin"
        >注册</van-button
      >
    </van-space>
    <van-row v-if="type == '登录'" justify="center" class="footer">
      <van-col span="5" @click="type = '注册'">立即注册</van-col>
      <van-col span="1">|</van-col>
      <van-col span="5">忘记密码</van-col>
    </van-row>
    <van-row v-else="type == '注册'" justify="center" class="footer">
      <van-col span="8" @click="type = '登录'">已有账号去登录</van-col>
    </van-row>
  </main>
</template>
<style lang="scss" scoped>
main {
  font-family: PingFang-SC-Medium;
  width: 100%;
  max-width: 800px;
  padding: 20vh 20px 0 20px;
  margin: 0 auto;

  .input {
    border: 1px solid #dfdfdf;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 18px;
  }
  .btn {
    font-size: 18px;
  }
  .footer {
    font-size: 14px;
  }
}
.login-user {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  margin-bottom: 38px;
}
.footer {
  height: 40px;
  line-height: 40px;
  text-align: center;
}
</style>
